<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="../../lib/mui/mui.css" rel="stylesheet">
		<link href="../../css/app.css" rel="stylesheet">
		<style>
			body{
				background: rgba(247, 247, 247, .98) !important;
			}
			.app-tab-wrap {
				height: 48px; 
				word-wrap: break-word; 
				white-space:nowrap; 
				word-break: normal;
				float: left;
				padding: 0 5px;
			}
			.app-tab {
				display: inline-block;
				padding: 0 5px;
				line-height: 46px;
				height: 46px;
				min-width: 60px;
				text-align:center;
				word-wrap: break-word; 
				word-break: normal;
				color: inherit;
			}
			.app-active {
				border-bottom: 2px solid #0086D1;
				color : #0086D1 ;
			}
		</style>
	</head>

	<body>
		<div id="categories" class="app-tab-wrap">
		</div>
	</body>
	<script src="../../lib/mui/mui.js"></script>
	<script src="../../lib/framework/z-app.js"></script>
	<script src="../../lib/mustache/mustache.min.js"></script>
	<script id="categories" type="text/template">
		{{#records}}
		<a app-event="switchCategory" class="app-tab" href="javascript:void(0)" index="{{index}}" dataid="{{_value}}" data="{{_data}}">{{_text}}</a>
		{{/records}}
	</script>
	<script> 
		App.go({
			deviceReady : function(d) {
				var width = plus.screen.resolutionWidth;
				width = width-48*2;
				App.frameWidth = width;
			},
			events : {
				custom : {
					settings : function(e) {
						var detail = e.detail;
						App.textName = detail.text || "text";
						App.valueName = detail.value || "value";
						
						//这里可以是url,也可以是传json数据
						var url = detail.url;
						var data = detail.data;
						if(url){
							App.handleTemplate({
								beforeAjax : function(tpl){
									tpl.ajax.url = url;
								},
								ajaxSuccess : function(tpl){
									var l = tpl.ajax.result.data.length;
									var width = App.frameWidth/l - 8;
									var dom = document.getElementById('categories');
									var count = 0;
									App.each(dom.children, function(i,d){
										count += d.clientWidth;
										d.setAttribute('index', i);
									});
									if (count < App.frameWidth) {
										App.each(dom.children, function(i,d){
											d.setAttribute('style', 'min-width:'+width+'px!important');
										});
									}
								},
							});
						} else if(data){
							App.handleTemplate({
								beforeAjax : function(tpl){
									tpl.ajax.result = {
										data : data
									};
								},
							});
							var l = data.length;
							var width = App.frameWidth/l - 8;
							var dom = document.getElementById('categories');
							var count = 0;
							App.each(dom.children, function(i,d){
								d.setAttribute('index', i);
								count += d.clientWidth;
							});
							if (count < App.frameWidth) {
								App.each(dom.children, function(i,d){
									d.setAttribute('style', 'min-width:'+width+'px!important');
								});
							}
						}
						if (typeof detail.onNotify != 'undefined') {
							App.onNotify = detail.onNotify;	
						}
						setTimeout(function(){
							if(detail.curIndex){
								App.opts.events.custom.setCurCate({index:detail.curIndex});
							}else{
								App.opts.events.custom.showFirst();
							}
							
						}, 500);
					},
					switchCategory : function(e) {
						var tgt = e.target;
						if (typeof tgt == 'undefined' || !tgt) {
							return;
						}
						App.each(App.siblings(tgt), function(i,v){
							v.classList.remove('app-active');
						});
						
						// 处理选中按钮在滚动条中居中显示
		                var move = (App.frameWidth - 44)/2;
		                var toX = tgt.offsetLeft - move;
		                window.scrollTo(toX, 0);
						tgt.classList.add('app-active');
						
						var dataid = tgt.getAttribute('dataid');
						var index = tgt.getAttribute('index');
						var data = tgt.getAttribute('data');
						if (data) {
							data = JSON.parse(data);
						}
						// 通知兄弟页面category被点击的事件
						var onNotify = App.onNotify || plus.webview.currentWebview().onNotify;
						App.notifySiblings(onNotify, {dataid : dataid, index : index, data : data});
						// 让所有兄弟滚动条回到顶部
						App.eachSiblings(function(i,v){
							App.scrollTop(v);
						});
					},
					showFirst : function(e){
						var wrap = document.getElementById('categories');
						var first = wrap.children[0];
						App.opts.events.custom.switchCategory({ target : first });
					},
					go : function(e) {
						var detail = e.detail;
						var direction = detail.direction;
						var wrap = document.getElementById('categories');
						var next;
						var prev;
						App.each(wrap.children, function(i,v){
							if (v.classList.contains('app-active')) {
								if (i > 0) {
									prev = wrap.children[i-1];
								} 
								if (i < wrap.children.length-1) {
									next = wrap.children[i+1];
								}
							}
						});
						if ("next" == direction && next) {
							App.opts.events.custom.switchCategory({ target : next });
						} else if ("prev" == direction && prev) {
							App.opts.events.custom.switchCategory({ target : prev });
						}
					},
					setCurCate:function(e){
						var wrap = document.getElementById('categories');
						var cur = wrap.children[e.index];
						App.opts.events.custom.switchCategory({ target : cur });
					}
				}
			},
			template : {
				render : function(tpl) {
					if (!tpl.ajax.result || typeof tpl.ajax.result == 'undefined') {
						return ;
					}
					// HTTP请求返回的数据
					var records = tpl.ajax.result.data;
					App.each(records, function(i,v){
						v.index = parseInt(i);
						v._value = v[App.valueName];
						v._text = v[App.textName];
					});
					var model = {
						records : records,
						_data : function(){
							return JSON.stringify(this);
						}
					};
					// 使用'大胡子'模板引擎来渲染
					var output = Mustache.render(tpl.html, model);
					return output;
				}
			},
			appReady : function() {
			}
		});
	</script>
</html>